<template>
	<view class="container">
		<view class="content">
			<!-- LOGO图标区域 -->
			<view class="logo">
				<image src="/static/statistics/successful.png" mode="widthFix"></image>
			</view>
			<!-- 文字区域 -->
			<view class="text-group">
				<view class="success-text">
					提交成功
				</view>
				<view class="order-id">
					等待平台审核
				</view>
			</view>
			<!-- 按钮区域 -->
			<view class="button-group">
				<button class="back-home" @click="goback">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goback(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	.container {
		/* 让内容垂直居中 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		min-height: 100vh;
		/* 最小高度为视口高度，100%屏幕高度 */
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 300rpx;
	}

	/* 图片样式 */
	.logo image {
		width: 132rpx;
		height: 132rpx;
	}

	/* 文字区域样式 */
	.text-group {
		display: flex;
		flex-direction: column;
		margin-top: 80rpx;
		text-align: center;
		gap: 40rpx;
	}

	/* 预约成功文字样式 */
	.success-text {
		font-size: 36rpx;
		font-weight: bold;
		/* 字体加粗 */
		margin-bottom: 20rpx;
	}

	/* 预约编号 */
	.order-id {
		font-size: 28rpx;
		color: #666;
	}

	/* 按钮容器样式 */
	.button-group {
		margin-top: 80rpx;
		/* 按钮距离上面的文字距离 */
		display: flex;
		flex-direction: column;
		/* 按钮垂直排列，上下分布 */
		gap: 40rpx;
		/* 按钮之间的距离 */
		width: 100%;

	}

	/* 每一个按钮样式 */
	.back-home {
		background-color: #E0E0E0;
		/* 按钮背景颜色 */
		color: #333;
		/* 按钮文字颜色 */
		border-radius: 8rpx;
		/* 边框圆角 */
		width: 100%;
	}

	.booking-details {
		background-color: #007af0;
		color: #fff;
		border-radius: 8rpx;
		width: 100%;
	}
</style>